<template>
	<view class="containt">
		<!-- <image src="@/static/img/jdsbj.png" mode="aspectFit" class="imgbg"></image> -->
	  <u-sticky bgColor="#fff">
			<u-tabs :list="tabList" itemStyle="padding:18rpx 44rpx 18rpx;text-align:center;font-size:25rpx;" lineWidth='36rpx' lineHeight='4rpx' @click="handleTabChange"></u-tabs>
	  </u-sticky>
		
		<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="listbox">
				<view class="itembox" v-for="(item,index) in order.list">
					<view class="orderNumber">
						订单号：{{ item.orderNumber }}
					</view>
					<view class="flex flexYCenter">
						<image :src="`${baseimgURL}${item.productPicture.split(',')[0]}`" mode="aspectFit" class="headPhone"></image>
						<view class="rightbox">
							<view class="title">{{ item.brandIdName }}</view>
							<view class="viewbox">鉴定师: <span class="span">{{ item.valueIdName }}</span></view>
							<view class="viewbox" v-if="item.entityPrice && item.entityPrice !== '0'">实物价: <span class="span">￥{{ item.entityPrice }}</span></view>
							<view class="viewbox" v-else>预估价: <span class="span">￥{{ item.futurePrice }}</span></view>
							<view class="viewbox">下单时间: {{ item.createTime }}</view>
						</view>
						<view class="flex_1"></view>
					</view>
					<view class="flex info" v-if="item.orderStatus === 'appraise' || item.orderStatus === 'valuation'">
						<view class="viewbox">鉴定中</view>
						<view class="span">鉴定师正在为您鉴定中，请耐心等候</view>
					</view>
					<view class="flex info" v-else-if="item.orderStatus === 'complete'">
						<view class="viewbox">已鉴定</view>
						<view class="span">鉴定师已为您完成鉴定</view>
					</view>
					<view class="handlebtn">
						<!-- <view class="lockIdentify btnstyle"  @click="handleIsLock(index)">
							联系客服
						</view> -->
						<view class="lockIdentify btnstyle" @tap="handleViewDetail(item)">
							查看详情
						</view>
						<!-- <view class="lockIdentify btnstyles"  @click="handleIsLock(index)">
							去支付
						</view> -->
						<!-- <view class="lockIdentify btnstyles"  @click="handleIsLock(index)">
							催一催
						</view> -->
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script lang="ts" setup>
	import { onLoad, onPageScroll, onReachBottom, onShow } from "@dcloudio/uni-app"
	import { onMounted, ref, reactive } from "vue"
	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
	import { fetchOrderList } from '@/api/order'
	import { baseimgURL } from '@/config'

	const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom) 
	const order = reactive({
		list: []
	})
	const tabList = ref([{name:'全部', value: ''},{name:'鉴定中', value: 'appraise'},{name:'已鉴定', value: 'payment'},{name:'已完成', value: 'complete'},{name:'已取消', value: 'cancel'}])
	const mode = ref(true)
	const queryParams = reactive({
		query: {},
		typeCode: 'RecycleOrder',
		pageNum: 1,
		pageSize: 10
	})
	const switchMode = () =>{
		mode.value = !mode.value
	}
	
	const handleViewDetail = (item) => {
	  uni.navigateTo({
	    url: '/pages/proddetail/proddetail?id=' + item.id,
	  })
	}

	const handleTabChange = (item) => {
		queryParams.pageNum = 1
		queryParams.query.orderStatus = item.value
		getOrderList()
	}

	// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
	const upCallback = (mescroll)=>{
		queryParams.pageNum = mescroll.num
		queryParams.pageSize = mescroll.size
		
		getOrderList(mescroll)
	}

	const getOrderList = async (mescroll) => {
		if (queryParams.query.orderStatus === '') {
			delete queryParams.query.orderStatus
		}
		try {
			const { data, code, msg } = await fetchOrderList(queryParams)
			if (code === '1') {
				const curPageData = data.list || [] // 当前页数据
				if (!mescroll) {
					mescroll = getMescroll()
				}
				if(mescroll.num == 1) order.list = [] // 第一页需手动制空列表
				order.list = order.list.concat(curPageData) //追加新数据
				mescroll.endBySize(curPageData.length, data.total) //必传参数(当前页的数据个数, 总数据量)
			} else {
				uni.showToast({
					icon: "none",
					title: msg,
				});
				mescroll.endErr()
			}
		} catch(err) {
			console.error(err)
		}
	}
</script>

<style lang="scss" scoped>
	.search{
		background: #fff;
		padding: 20rpx 20rpx;
		position: fixed;
		width: 750rpx;
		box-sizing: border-box;
		top: 0;
	}
	.menu{
		width: 28rpx;
		height: 28rpx;
		margin-left: 38rpx;
	}
	.containt {
	  padding: 0rpx 0rpx;
	}
	.imgbg{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: -1;
	}
	.listbox{
		// margin-top: 228rpx;
		padding: 14rpx 20rpx 0rpx;
	}
	.orderNumber{
		padding: 21rpx 0 0 21rpx;
		font-size: 25rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #060C3C;
		line-height: 36rpx;
		opacity: .6;
	}
	// .prodlistbox{
	// 	padding: 100rpx 20rpx 0rpx;
		
	// 	.prodPhone{
			
	// 	}
	// 	.itembox{
	// 		background: #FFFFFF;
	// 		border-radius: 7rpx;
	// 		margin-bottom: 15rpx;
	// 		// width: 96%;
	// 		width: 350rpx;
	// 		box-sizing: border-box;
	// 		.prodPhone{
	// 			width: 100%;
	// 			height: 348rpx;
	// 			border-radius: 7rpx;
	// 		}
	// 		.bottombox{
	// 			padding: 16rpx 14rpx;
	// 			box-sizing: border-box;
	// 			.prodtitle{
	// 				font-size: 27rpx;
	// 				font-family: PingFangSC, PingFang SC;
	// 				font-weight: 800;
	// 				color: #333333;
	// 				line-height: 38rpx;
	// 				margin-bottom: 11rpx;
	// 				margin-top: 27rpx;
	// 			}
	// 			.prodviewbox{
	// 				font-size: 24rpx;
	// 				font-family: PingFangSC, PingFang SC;
	// 				font-weight: 500;
	// 				color: #333333;
	// 				line-height: 33rpx;
	// 			}
	// 			.viewbox{
	// 				font-size: 22rpx;
	// 				font-family: PingFangSC, PingFang SC;
	// 				font-weight: 400;
	// 				color: #8487A4;
	// 				line-height: 31rpx;
	// 			}
	// 		}
	// 	}
		
		
	// }
	.itembox{
		background: #FFFFFF;
		border-radius: 15rpx;
		margin-bottom: 15rpx;
		padding-bottom: 20rpx;
	}
	.headPhone{
		width: 127rpx;
		height: 127rpx;
		margin-top: 14rpx;
		margin-left: 22rpx;
	}
	.rightbox{
		margin-left: 27rpx;
		// flex: 1;
		padding-right: 27rpx;
		.viewbox{
			font-size: 20rpx;
			font-weight: 400;
			color: #8C9096;
			line-height: 31rpx;
			margin-right: 6rpx;
			.span{
				color: #333333;
			}
		}
	}
	.identification{
		width: 96rpx;
		height: 96rpx;
		margin-right: 22rpx;
	}
	.title{
		font-size: 27rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		color: #060C3C;
		// color: #000;
        line-height: 38rpx;
		margin-bottom: 4rpx;
		margin-top: 14rpx;
	}
	.mode{
		height: 33rpx;
		background: #F4F7FB;
		border-radius: 4rpx;
		font-size: 18rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #5D7698;
		line-height: 33rpx;
		margin-right: 9rpx;
		padding: 3rpx 7rpx;
	}
	.info{
		background: #F6EDF4;
		border-radius: 7rpx;
		margin: 0 20rpx;
		padding: 8rpx 14rpx;
		color:#999999;
		margin-top: 16rpx;
		align-items: center;
		.viewbox{
			font-size: 24rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			color: #953B82;
			
		}
		.span{
			font-size: 22rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			color: #953B82;
			margin-left: 14rpx;
		}
	}
	.handlebtn{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 0 10rpx;
		margin-right: 22rpx;
		// margin-bottom: 18rpx;
		
	}
	// .Identify{
	// 	width: 130rpx;
	// 	height: 51rpx;
	// 	// background: #953B82;
	// 	border-radius: 27rpx;
	// 	font-size: 22rpx;
	// 	font-family: PingFangSC, PingFang SC;
	// 	font-weight: 500;
	// 	color: #6950FB;
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: space-between;
	// 	padding: 0 22rpx;
	// 	margin-top: 18rpx;
	// 	border: 1px solid #6950FB;
	// 	box-sizing: border-box;
	// 	image{
	// 		width: 26rpx;
	// 		height: 32rpx;
	// 	}
		
	// }
	.lockIdentify{
		// width: 130rpx;
		// height: 51rpx;
		// background: #953B82;
		// background: #FFBC3F;
		border-radius: 25rpx;
		font-size: 24rpx;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 8rpx 16rpx;
		margin-top: 18rpx;
		box-sizing: border-box;
		margin-left: 22rpx;
		image{
			width: 26rpx;
			height: 32rpx;
		}
		
	}
	.btnstyle{
		color: #1F2233;
		border: 2rpx solid #CCCCCC;
	}
	.btnstyles{
		color: #953B82;
		border: 2rpx solid #953B82 !important;
	}
	.listbox2{
		
	}
</style>